<template>
  <div class="cont">
    <div class="inw">
      <el-input class="inp" clearable v-model="state.key" placeholder="请输入标签名称搜索" @change="inchange" />
      <div class="divbtn" @click="state.show = true"></div>
    </div>
    <div class="dia" v-if="state.show">
      <div class="header">
        <div class="title">搜索信息</div>
        <div class="close" @click="state.show = false"></div>
      </div>
      <div class="content">
        <div class="list">
          <div class="item" v-for="(item, index) in state.data" :key="index" @click="change(item)">{{ item.tagName }}</div>
          <div class="item" v-if="state.data.length==0">无匹配</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  list: {
    default:[],
    type:Array
  }
});
const emit = defineEmits(["change"]);
const state = reactive({
  key: '',
  show: false,
  data: []
})
const inchange = (v) => {
  if(v!=''){
    state.data = props.list.filter(x=>x.tagName.indexOf(v)>-1)
  }
}
const change = (item) => {
  emit('change',item.tagId)
  state.show=false
}
</script>

<style lang="scss" scoped>
.cont {
  width: 300px;
}

.inw {
  width: 230px;
  height: 44px;
  background-image: url('/images/bg01.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;

  .inp {
    margin-left: 15px;
    width: 160px;
    :deep(.el-input__wrapper){
      background-color: transparent !important;
    }
    :deep(.el-input__inner){
      color: #FFFFFF;
    }
  }

  .divbtn {
    margin-left: 10px;
    width: 40px;
    height: 40px;
    cursor: pointer;
  }
}

.dia {
  margin-top: 5px;
  width: 300px;
  height: 238px;
  display: flex;
  flex-direction: column;

  .header {
    width: 300px;
    height: 38px;
    background-image: url('/images/bg03.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;

    .title {
      margin-left: 30px;
      font-weight: 600;
      font-size: 14px;
      color: #FFFFFF;
    }

    .close {
      margin: 8px 2px 0 auto;
      width: 30px;
      height: 30px;
      cursor: pointer;
      opacity: 0.5;
    }
  }

  .content {
    width: 300px;
    max-height: 200px;
    background-image: url('/images/bg04.png'), url('/images/bbg.png');
    background-size: 100% 13%, 100% 100%;
    background-position-y: 103%, 0;
    background-repeat: no-repeat;
    padding: 10px 10px 12px 10px;

    .list {
      width: 100%;
      max-height: 100%;
      overflow-y: auto;
      padding: 5px 0;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      background-image: url('/images/mb1.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .item {
        width: 100%;
        height: 30px;
        margin: 6px 0;
        padding: 0 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 14px;
        color: #FFFFFF;

        &:hover {
          background-image: url('/images/bg05.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
      }
    }
  }
}
</style>